
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import './index.css';

function Square(props) {
    return (
        <button
            className="square"
            onClick={props.onClick}
        >
            {props.value}
        </button>
    );
}



function Board(props) {
    let squares = props.squares
    function renderSquare(i) {
        return <Square
            value={squares[i]}
            onClick={() => {
                props.onClick(i)
            }}
        />;
    }

    return (
        <div>
            <div className="board-row">
                {renderSquare(0)}
                {renderSquare(1)}
                {renderSquare(2)}
            </div>
            <div className="board-row">
                {renderSquare(3)}
                {renderSquare(4)}
                {renderSquare(5)}
            </div>
            <div className="board-row">
                {renderSquare(6)}
                {renderSquare(7)}
                {renderSquare(8)}
            </div>
        </div>
    );

}


function Game() {
    let status, winner
    const [stepNum, setStepNum] = useState(0)
    const [xIsNext, setXIsNext] = useState(true)
    const [history, setHistory] = useState([{
        squares: Array(9).fill(null)
    }])

    function calculateWinner(squares) {
        const lines = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6],
        ];
        for (let i = 0; i < lines.length; i++) {
            const [a, b, c] = lines[i];
            if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
                return squares[a];
            }
        }
        return null;
    }

    function handleClick(i) {
        let his = history.slice(0, stepNum + 1)
        let current = his[stepNum]
        let newSquares = current.squares.slice()
        if (calculateWinner(newSquares) || newSquares[i]) {
            return
        }
        newSquares[i] = xIsNext ? 'X' : 'O'
        setHistory(his.concat([{
            squares: newSquares
        }]))
        setXIsNext(!xIsNext)
        setStepNum(his.length)

    }

    function jumpTo(i) {
        setStepNum(i)
        setXIsNext(!(i % 2))
    }

    let current = history[stepNum]
    winner = calculateWinner(current.squares)

    if (winner) {
        status = 'Winner: ' + winner
    } else {
        status = `Next player: ${xIsNext ? 'X' : 'O'}`;
    }

    let moves = history.map((step, i) => {
        const desc = i ?
            'Go to move #' + i :
            'Go to game start';
        return (
            <li key={i}>
                <button onClick={() => { jumpTo(i) }}> {desc}</button>
            </li>
        )
    })
    return (
        <div className="game">
            <div className="game-board">
                <Board
                    squares={current.squares}
                    onClick={(i) => { handleClick(i) }}
                />
            </div>
            <div className="game-info">
                <div>{status}</div>
                <ol>{moves}</ol>
            </div>
        </div>
    );
}

ReactDOM.render(
    <Game />,
    document.getElementById('root')
);

if (module.hot) {
    module.hot.accept()
}
